<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的基金列表</title>
    <script src="/static/echarts.js"></script>
</head>
<body>

{% include "header.html" %}

<script type="text/javascript">
    var isMobile = false;
        if (window.screen.width < 800) {
            
            document.writeln("<style type='text/css'>");
            document.writeln("#A1{width:100%;height:30px}");
            document.writeln("#A2{width:100%;}");
            document.writeln("#A3{width:100%;}");
            document.writeln("#A4{width: 100%;height:400px;}");
            document.writeln("</style>");
        } else {
            document.writeln("<style type='text/css'>");
            document.writeln("#A1{width:100%;height:30px}");
            document.writeln("#A2{width:40%;position:absolute; top:30px; left:51%}");
            document.writeln("#A3{width:60%;position:absolute; top:30px;}");
            document.writeln("</style>");
        }
</script>        

<div id="A1">
    <table border="0" cellspacing="5" cellpadding="0" valign="top">
        <tr>
            <td align="center">
                <font color="red">{{warning}}</font>
            </td>
        </tr>
    </table>
</div>

<div id="A2">
<table>
    <tr>
        <td valign="top"><div id="monthIncome" style="width: 650px;height:380px;"></div></td>
    </tr>
    <tr>
        <td valign="top"><div id="pie" style="width:650px;height:380px;"></div></td>
    </tr>
</table>
</div>

<div id="A3">
<table>
    <tr>
        <td>
            <table border="0" cellspacing="5" cellpadding="0" valign="top">
                <tr>
                    <td valign="top">
                        <table valign="top">
                            <tr>
                                <td valign="top">
                                    <table border="0" cellspacing="5" cellpadding="0" valign="top"  class="table15_6">
                                        <tr>
                                            <td><b>基金数量：</b></td>
                                            <td>{{fundNum}}</td>
                                        </tr>
                                        <tr>
                                            <td><b>累计收益：</b></td>
                                            <td>{{incomeTotal}} {{incomeTotalPercent}}%</td>
                                        </tr>
                                        <tr>
                                            <td><b>持有收益：</b></td>
                                            <td>{{income}} {{incomePercent}}%</td>
                                        </tr>
                                        <tr>
                                            <td><b>成本：</b></td>
                                            <td>{{cost}}</td>
                                        </tr>
                                    </table>
                                </td>
                                <td valign="top">
                                    <table border="0" cellspacing="5" cellpadding="0" valign="top"  class="table15_6">
                                        <tr>
                                            <td><b>近一年收益：</b></td>
                                            <td>{{lastYearIncome}}</td>
                                        </tr>
                                        <tr>
                                            <td><b>近两年收益：</b></td>
                                            <td>{{last2YearIncome}}</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>   
                        </table>
                    </td>
                </tr>


                <tr>
                    <td>
                        <table>
                            <tr>
                                <td valign="top">
                                    <table  border="0" cellspacing="5" cellpadding="0" valign="top"  class="table15_6">
                                        <tr>
                                            <td><b>分类</b></td>
                                            <td><b>收益</b></td>
                                            <td><b>收益率</b></td>
                                            <td><b>成本</b></td>
                                        </tr>
                                        {% for type in types %}
                                        <tr>
                                            <td>{{type.0}}</td>
                                            <td>{{type.2}}</td>
                                            <td>{{type.3}}%</td>
                                            <td>{{type.1}}</td>
                                        </tr>
                                        {% endfor %}
                                    </table>
                                </td>
                                <td valign="top">
                                    <table  border="0" cellspacing="5" cellpadding="0" valign="top"  class="table15_6">
                                        <tr>
                                            <td><b>分类</b></td>
                                            <td><b>收益</b></td>
                                            <td><b>收益率</b></td>
                                            <td><b>成本</b></td>
                                        </tr>
                                        {% for risk in risks %}
                                        <tr>
                                            <td>{{risk.0}}</td>
                                            <td>{{risk.2}}</td>
                                            <td>{{risk.3}}%</td>
                                            <td>{{risk.1}}</td>
                                        </tr>
                                        {% endfor %}
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table  class="table15_6">
                            <tr>
                                <td><b>编码</b></td>
                                <td><b>名称</b></td>
                                <td><b>类型</b></td>
                                <td><b>风险</b></td>
                                <td><b>累计收益</b></td>
                                <td><b>持有收益</b></td>
                                <td><b>收益率</b></td>
                                <td><b>价值</b></td>
                                <td><b>操作</b></td>
                            </tr>
                            {% for fund in funds %}

                                {% if fund.priceMonitor == 1 %}
                                    <tr style="color:red">
                                    {% else %}
                                    {% if fund.priceMonitor == 2 %}
                                    <tr style="color:gold">
                                    {% else %}
                                    <tr>
                                    {% endif %}
                                {% endif %}
                                    <td>{{fund.code}}</td>
                                    <td>{{fund.name}}</td>
                                    <td>{{fund.type}}</td>
                                    <td>{{fund.risk}}</td>
                                    <td>{{fund.incomeTotal}}</td>
                                    <td>{{fund.income}}</td>
                                    <td>{{fund.incomeRate}}%</td>
                                    <td>{{fund.cost|add:fund.income}}</td>
                                    <td><a href="/fundinfo/{{fund.code}}/">查看</a></td>
                                </tr>
                            {% endfor %}
                        </table>
                    </td>

                </tr>
            </table>
        </td>
        <td>
            <script type="text/javascript">
                WritePic(false);
            </script>
        </td>
    </tr>
</table>
</div>

</body>
</html>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('monthIncome'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '',
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['月收益','月份']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : [
                    {% for income in monthIncome %}
                    '{{income.date}}',
                    {% endfor %}
                    ]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'月收益',
                type:'bar',
                data:[
                    {% for income in monthIncome %}
                    '{{income.income}}',
                    {% endfor %}
                    ],
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('monthIncomePercent'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '',
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['月收益率','月份']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : [{{ .monthIncomePercent}}'{{.Date}}',{{end}}]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'月收益率',
                type:'line',
                data:[{{ .monthIncomePercent}}'{{.Income}}',{{end}}],
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

<script type="text/javascript">
    var dom = document.getElementById("pie");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '嵌套环形图';

    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        //legend: {
        //    orient: 'vertical',
        //    x: 'right',
            //data:['混合型','债券型','FOF','指数型','富国天惠成长混合','海富通阿尔法对冲混合','景顺长城新兴成长混合','工银瑞信双利B','银华信用季季红债券A','招商双债增强债券','招商安心','易方达高等级信用债C','建信福泽安泰混合','华夏聚惠稳健目标A','汇添富中证主要消费ETF联接','景顺长城沪深300指数增强','建信中证500指数增强A']
        //},
        series: [
            {
                name:'访问来源',
                type:'pie',
                selectedMode: 'single',
                radius: [1, '39%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {% for type in types %}
                        {value:{{type.1}}, name:'{{type.0}}'},
                    {% endfor %}
                ]
            },
            {
                name:'访问来源',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: ' {b|{b}}\n{hr|}\n{c}{per|{d}%} ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 12,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[
                    {% for item in typeItems %}
                        {value:{{item.1}}, name:'{{item.0}}'},
                    {% endfor %}
                ]
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


<style type="text/css">
    .table15_6 table {
        width:100%;
        margin:15px 0;
        border:0;
    }
    .table15_6 th {
        font-weight:bold;
        background-color:#d3dae6;
        color:#202053
    }
    .table15_6,.table15_6 th,.table15_6 td {
        font-size:0.95em;
        text-align:center;
        padding:4px;
        border-collapse:collapse;
    }
    .table15_6 th {
        border: 1px solid #d3dae6;
        border-width:1px
    }
    .table15_6 td {
        border: 1px solid #d3dae6;
        border-width:1px
    }
    .table15_6 tr {
        border: 1px solid #ffffff;
    }
    .table15_6 tr:nth-child(odd){
        background-color:#f7f7f7;
    }
    .table15_6 tr:nth-child(even){
        background-color:#ffffff;
    }
    </style>